<template>
  <WithDialog
    title="离职交接"
    :visible.sync="dialogVisible"
    width="35%"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    :confirm-btn-loading="btnLoading"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    <div class="check-result">
      <el-alert
        type="warning"
        title="请确认以下内容是否完成，完成后方可设为离职"
        style="margin-bottom: 12px;"
      />
      <div
        v-for="(item, index) in checkResultFormat"
        :key="index"
        class="item"
        :class="{ 'item-success': !item.result, 'item-warning': item.result }"
      >
        <div class="item-content">
          <i
            v-if="loading"
            class="el-icon-loading status-icon"
            style="color: #2F88FF;"
          />

          <i
            v-else
            :class="item.result ? 'el-icon-warning' : 'el-icon-success'"
            class="status-icon"
          />
          <span class="check-text">{{ item.content }}</span>
          <template v-if="!loading">
            <el-tag
              v-if="!item.result"
              type="success"
              size="small"
              class="status-tag"
            >
              已完成
            </el-tag>

            <el-button
              v-if="item.toView && item.result"
              type="text"
              style="color: #E6A23C;"
              @click="handleToView(item.toView)"
            >
              立即处理
            </el-button>
          </template>
        </div>
      </div>
    </div>
  </WithDialog>
</template>
<script>
import { resignationTesting } from '@/api/personnel'
import WithDialog from '@/components/WithDialog/withDialog.vue'
export default {
  name: '',
  components: {
    WithDialog
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
      default: false
    },

    userId: {
      type: Number,
      default: null
    },
    btnLoading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checkResult: null,
      loading: false
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(v) {
        this.$emit('update:visible', v)
      }
    },
    checkResultFormat() {
      const checkMap = {
        coverPersonnel: {
          content: '当前离职人员是否已取消设置为评价人',
          result: !!this.checkResult?.coverPersonnel,
          toView: '/evaluate/user-set'
        },
        personnel: {
          content: '当前离职人员是否已取消设置为被评人',
          result: !!this.checkResult?.personnel,
          toView: '/evaluate/user-set'
        },
        approval: {
          content: '当前离职人员是否已取消设置为审批人',
          result: !!this.checkResult?.approval,
          toView: '/approval/template'
        },
        action: {
          content: '当前离职人是否存在需要他待处理的审批',
          result: !!this.checkResult?.action
        },
        exists: {
          content: '当前离职人是否已取消设置为通知人',
          result: !!this.checkResult?.exists,
          toView: '/notice/user/set'
        }
      }

      return Object.keys(checkMap).map(key => {
        return {
          ...checkMap[key]
        }
      })
    },

    isAllSuccess() {
      return !this.checkResultFormat.some(item => item.result === true)
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.handleCheck()
      }
    }
  },
  methods: {
    async handleCheck() {
      this.loading = true
      try {
        const res = await resignationTesting({ user_id: this.userId })
        this.checkResult = res.data
      } catch (error) {
        this.$message.error(error?.response?.data?.message || '操作失败，请稍后重试')
      } finally {
        this.loading = false
      }
    },

    handleToView(path) {
      this.$router.push({
        path: path
      })
    },

    async handleConfirm() {
      await this.handleCheck()
      if (this.isAllSuccess) {
        this.$emit('confirm', this.userId)
      } else {
        this.$message.error('请先完成以上操作')
      }
    },

    handleCancel() {
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style lang="scss" scoped>
.check-result {
  .item {
    margin-bottom: 12px;
    border-radius: 8px;
    transition: all 0.3s;
    padding: 10px;
    border: 1px solid #ebeef5;

    &:last-child {
      margin-bottom: 0;
    }

    .item-content {
      display: flex;
      align-items: center;
      //padding: 4px 0;
    }

    .status-icon {
      font-size: 20px;
      margin-right: 12px;
    }

    .check-text {
      flex: 1;
      font-size: 14px;
    }

    .status-tag {
      margin-left: 12px;
    }

    &.item-success {
      .status-icon {
        color: #67c23a;
      }
    }

    &.item-warning {
      .status-icon {
        color: #e6a23c;
      }
    }
  }
}
</style>
